<template>
  <div style="height: 400px;">
    <el-card style="width: 300px;justify-content: center;align-items: center;margin: 80px auto 0;">
      <el-descriptions title=用户信息 column="1" >
        <el-descriptions-item>
          <el-upload action="" :show-file-list="false"
                     :http-request="upload"
          >
            <el-tooltip content="点击上传头像">
              <el-avatar :src="user.avatar" style="width: 100px;height: 100px"/>
            </el-tooltip>
          </el-upload>
        </el-descriptions-item>
        <el-descriptions-item label="昵称:" v-if="user.nickname">
          {{ user.nickname}}
          <el-button type="text" @click="handleAddNickname">修改昵称</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="昵称:" v-else>
          <el-button type="text" @click="handleAddNickname">添加昵称</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="用户名:">{{ user.username }}</el-descriptions-item>
        <el-descriptions-item label="邮箱:" v-if="user.email">
          {{ user.email }}
          <el-button type="text" @click="handleAddMail">修改邮箱</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="邮箱:" v-else>
          <el-button type="text" @click="handleAddMail">添加邮箱</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="性别:" v-if="user.gender">
            <span>
              {{ user.gender }}&nbsp;
            </span>
          <el-button type="text" @click="this.user.gender = ''">修改性别</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="性别:" v-else>
          <el-select v-model="user.gender" placeholder="请选择性别" style="width: 200px"
                     @change="submit">
            <el-option label="男" value="男"/>
            <el-option label="女" value="女"/>
            <el-option label="未知" value="未知"/>
          </el-select>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-dialog :title="title" v-model="dialogTableVisible" width="30%">
      <el-form :model="user" label-width="80px">
        <el-form-item label="昵称" v-if="title === '修改昵称'">
          <el-input v-model="user.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" v-else>
          <el-input v-model="user.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request.js";

export default {
  inject: ['reload'],
  data() {
    return {
      user: {},
      dialogTableVisible:false,
      title: '修改昵称'
    }
  },
  methods: {
    handleAddNickname() {
      this.dialogTableVisible = true
      this.title = '修改昵称'
    },
    handleAddMail() {
      this.dialogTableVisible = true
      this.title = '修改邮箱'
    },
    upload(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      request.post('/file/upload', formData).then(res => {
        this.user.avatar = res.data
        this.submit()
      }).catch(response => {
        console.log('图片上传失败')
      })
    },
    submit() {
      request.put("/user", this.user).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.getUser()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getUser() {
      request.get("/user/info/" + this.user.id).then(res => {
        if (res.code === '0') {
          localStorage.setItem('user', JSON.stringify(res.data))
          this.reload();
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem('user'))
  },
}
</script>
<style scoped>

</style>